<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import fixTime from '@/utils/fixTime'
import { formatTime } from '@/utils/common'

import {
  getReportListApi
} from '@/api/report'
// props

// 定义变量
// 弹框显隐控制变量
const ReportManagerDialogVisible = ref(false)
const title = ref('导出的数据')
// 表头
const columnHeader = reactive({
  'ID': 'id',
  '设备类型': 'type',
  '设备名称': 'name',
  '传感值': 'value',
  '报警阈值': 'warnValue',
  '时间': 'creationTime',
  '报警位置': 'posDescription',
  '是否报警': 'isWarn'
})
const detailsForm = ref([])
// 设备类型options
const typeOptions = ref([
  {
    value: '1',
    label: '一氧化碳'
  },
  {
    value: '2',
    label: '甲烷'
  },
  {
    value: '4',
    label: '烟感'
  },
  {
    value: '3',
    label: '粉尘'
  },
  {
    value: '5',
    label: '氧气'
  },
  {
    value: '0',
    label: '无'
  }
])
// 设备状态
const type = ref('')
// 设备名称
const device = ref('')
// 筛选时间
const nowTime = new Date()
const time = ref([ new Date(nowTime.getTime() - 24 * 60 * 60 * 1000), nowTime ])
// 筛选的设备位置
const position = ref('')
// 列表数据源
const reportList = ref([])
// 分页的绑定数据
const currentPage = ref(1)
// 总条数
const total = ref(0)
// 每页条数
const pageSize = ref(20)

// 定义方法

// 监听器
watch(currentPage, (nv, ov) => {
  console.log('监听翻页------->', ov, nv)
  let data = {
    startTime: time.value[0] ? fixTime(time.value[0]) : '',
    endTime: time.value[1] ? fixTime(time.value[1]) : '',
    type: type.value ? type.value : null,
    name: device.value ? device.value : null,
    skipCount: (nv - 1) * 10,
    maxResultCount: pageSize.value
  }
  getReportData(data)
})

// 展示弹框
const showReportManager = async () => {
  let data = {
    startTime: time.value[0] ? fixTime(time.value[0]) : '',
    endTime: time.value[1] ? fixTime(time.value[1]) : '',
    skipCount: 0,
    maxResultCount: pageSize.value
  }
  getReportData(data)
  ReportManagerDialogVisible.value = true
}

// 清洗设备类型
const fixDeviceType = (arr:any) => {
  console.log('未处理的数据------>', arr)
  arr.forEach((item: any, index: number) => {
    console.log('未处理的数据------>', item)
    arr[index].creationTime = formatTime(item.creationTime)
    switch (item.type) {
    case 0:
      arr[index].type = '无'
      break
    case 1:
      arr[index].type = '一氧化碳'
      break
    case 2:
      arr[index].type = '甲烷'
      break
    case 3:
      arr[index].type = '粉尘'
      break
    case 4:
      arr[index].type = '烟感'
      break
    case 5:
      arr[index].type = '氧气'
      break
    }
  })
  console.log('处理后的数据------>', arr)
  return arr
}

// 查询设备信息
const queryDevice = async () => {
  // if (!type.value && !time.value[0] && !time.value[2] && !position.value && !device.value) {
  //   ElMessage({
  //     message: '请输入查询条件！！！',
  //     type: 'warning'
  //   })
  //   return
  // }
  let data = {
    startTime: time.value[0] ? fixTime(time.value[0]) : '',
    endTime: time.value[1] ? fixTime(time.value[1]) : '',
    type: type.value ? type.value : null,
    name: device.value ? device.value : null,
    skipCount: 0,
    maxResultCount: pageSize.value
  }
  getReportData(data)
}

// 网络请求获取数据
const getReportData = async (data:any) => {
  let res = await getReportListApi(data)
  if (res.code === -1) {
    ElMessage({
      // message: `${res.message}`,
      message: '网络请求中断获取数据错误！',
      type: 'warning'
    })
    return
  }
  total.value = res.totalCount
  reportList.value = fixDeviceType(res.items)
  console.log('展示报表信息------>', reportList.value, res)
}

// 清除查询数据
const clearQueryData = () => {
  type.value = ''
  device.value = ''
  time.value[0] = new Date(nowTime.getTime() - 24 * 60 * 60 * 1000)
  time.value[1] = nowTime
  position.value = ''
}

// 确认导出
const exportConfirm = () => {
  ElMessageBox.alert('是否导出？', '确认', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: () => {
      ElMessage({
        type: 'info',
        message: '已导出'
      })
    }
  })
}

const handlePlanSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  let data = {
    startTime: time.value[0] ? fixTime(time.value[0]) : '',
    endTime: time.value[1] ? fixTime(time.value[1]) : '',
    type: type.value ? type.value : null,
    name: device.value ? device.value : null,
    skipCount: 0,
    maxResultCount: pageSize.value
  }
  getReportData(data)
}

// 关闭弹框
const closeDialog = () => {
  type.value = ''
  time.value[0] = new Date(nowTime.getTime() - 24 * 60 * 60 * 1000)
  time.value[1] = nowTime
  position.value = ''
  device.value = ''
  currentPage.value = 1
  reportList.value = []
}

// 组件暴露的函数
defineExpose({
  showReportManager
})
</script>

<template>
  <el-dialog
    v-model="ReportManagerDialogVisible"
    class="report-list-dialog"
    @close="closeDialog"
  >
    <template #header>
      <div class="report-header-box">
        <div class="title">
          报表管理
        </div>
        <vue3-json-excel
          class="export-excel-wrapper"
          :json-data="reportList"
          :fields="columnHeader"
          :header="title"
          name="报表数据.xls"
        >
          <div
            class="export-btn"
            @click="exportConfirm"
          >
            <i class="iconfont icon-daochu" />
            导出
          </div>
        </vue3-json-excel>
      </div>
    </template>
    <div class="filter-box">
      <el-select
        v-model="type"
        class="infrar-type"
        placeholder="请选择设备类型"
      >
        <template #prefix>
          <div>设备类型</div>
        </template>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- <el-select
        v-model="device"
        class="infrar-device"
        placeholder="请选择设备"
      >
        <template #prefix>
          <div>设备</div>
        </template>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <el-input
        v-model="device"
        class="infrar-posi"
        placeholder="请输入设备名称"
      >
        <template #prefix>
          <div>设备</div>
        </template>
      </el-input>
      <!-- <el-input
        v-model="position"
        class="infrar-posi"
        placeholder="请输入位置"
      >
        <template #prefix>
          <div>位置</div>
        </template>
      </el-input> -->
      <el-date-picker
        v-model="time"
        class="infrar-time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <div class="btn-box">
        <div
          class="search-btn"
          @click="queryDevice"
        >
          查询
        </div>
        <div
          class="clear-btn"
          @click="clearQueryData"
        >
          重置
        </div>
      </div>
    </div>
    <div class="report-list-table">
      <el-table
        class="device-table"
        :data="reportList"
        :header-cell-style="{ background: '#f7f8faFF', color: '#6B7785FF' }"
        style="width: 100%"
        height="449"
      >
        <el-table-column
          align="center"
          prop="id"
          label="序号"
          width="120"
        />
        <el-table-column
          align="center"
          prop="type"
          label="设备类型"
          width="120"
        />
        <el-table-column
          align="center"
          prop="name"
          label="设备"
          width="120"
        />
        <el-table-column
          align="center"
          prop="value"
          label="传感值"
          width="120"
        />
        <el-table-column
          align="center"
          prop="value"
          label="报警阈值"
          width="120"
        />
        <el-table-column
          align="center"
          prop="creationTime"
          label="时间"
        />
        <el-table-column
          align="center"
          prop="posDescription"
          label="位置"
        />
        <el-table-column
          align="center"
          prop="isWarn"
          label="是否报警"
          width="120"
        >
          <template #default="scope">
            {{ scope.row.isWarn ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      v-if="total"
      class="pagination-box"
    >
      <!-- <el-pagination
        v-model:current-page="currentPage"
        class="report-page"
        :page-size="pageSize"
        :pager-count="6"
        layout="prev, pager, next"
        :total="total"
      /> -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePlanSizeChange"
      />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.filter-box {
  display: flex;
  height: 32px;
  margin-left: 10px;

  /* border: 1px solid red; */
  .btn-box {
      display: flex;
      align-items: center;
      margin-left: 30px;
      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 30px;
        margin-top: 6px;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang, sans-serif;
        line-height: 20px;
        text-align: center;
        background-clip: text;
        border: 1px solid #1D41FF;
      }
      .search-btn {
        color: #fff;
        background: #1D41FF;
      }
      .search-btn:hover {
        cursor: pointer;
      }
      .clear-btn {
        width: 50px;
        margin-left: 15px;
      }
      .clear-btn:hover {
        color: #fff;
        background: #1D41FF;
        cursor: pointer;
      }
    }
  .icon-divider {
    width: 0 !important;
    height: 12px !important;
    margin-top: 10px !important;
    border: 1px solid #a9aeb8 !important;
  }
  .infrar-type,
  .infrar-device,
  .infrar-posi,
  .infrar-time {
    width: 240px;
    height: 32px;
  }
  .infrar-posi,
  .infrar-device,
  .infrar-time {
    margin-left: 16px;
  }
  .device-page {
    margin-left: 680px;
  }
}
.report-list-table {
  width: 1140px;
  height: 449px;
  margin-top: 16px;
  margin-left: 10px;
  border-right: 1px solid #e5e6eb;
  border-left: 1px solid #e5e6eb;

  /* border: 1px solid red; */
}
.pagination-box {
  display: flex;
  justify-content: end;
  height: 30px;
  margin-top: 16px;
  padding-left: 875px;

  /* border: 1px solid red; */
}
</style>
<style lang="scss">
.report-list-dialog {
  width: 1200px;
  height: 629px;
  .report-header-box {
    display: flex;
    margin-left: 10px;
    .title {
      width: 90px;
      height: 28px;
      color: #4e5969;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang, sans-serif;
      line-height: 23px;
      background-clip: text;

      /* border: 1px solid red; */
    }
    .export-btn {
      width: 60px;
      height: 28px;
      color: #2191FFFF;
      line-height: 28px;
      text-align: center;
      background: #FFF;

      /* border: 1px solid red; */
      border-radius: 4px;
      box-shadow: 0 2px 10px 0 rgb(166 184 208 / 60%);
      opacity: 1;
    }
    .export-btn:hover {
      cursor: pointer;
    }
    .export-btn:active {
      background: rgba($color: #FFF, $alpha: 10%);
    }
    .position-name {
      width: 252px;
      height: 28px;
      margin-left: 24px;
      color: #2191ff;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang, sans-serif;
      line-height: 23px;
      background-clip: text;
    }
  }
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>